<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src\display\TextField.js - Go2d</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="icon" href="../assets/favicon.ico">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title="Go2d" width="117" height="52"></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.6.7</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
                    <h2 class="off-left">APIs</h2>
                    <div id="api-tabview" class="tabview">
                        <ul class="tabs">
                            <li><a href="#api-classes">Classes</a></li>
                            <li><a href="#api-modules">Modules</a></li>
                        </ul>
                
                        <div id="api-tabview-filter">
                            <input type="search" id="api-filter" placeholder="Type to filter APIs">
                        </div>
                
                        <div id="api-tabview-panel">
                            <ul id="api-classes" class="apis classes">
                                <li><a href="../classes/Class.html">Class</a></li>
                                <li><a href="../classes/Director.html">Director</a></li>
                                <li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
                                <li><a href="../classes/Ease.html">Ease</a></li>
                                <li><a href="../classes/Event.html">Event</a></li>
                                <li><a href="../classes/EventEmitter.html">EventEmitter</a></li>
                                <li><a href="../classes/go2d.html">go2d</a></li>
                                <li><a href="../classes/ImageView.html">ImageView</a></li>
                                <li><a href="../classes/Matrix.html">Matrix</a></li>
                                <li><a href="../classes/ObjectPool.html">ObjectPool</a></li>
                                <li><a href="../classes/ResizeEvent.html">ResizeEvent</a></li>
                                <li><a href="../classes/ResourceLoader.html">ResourceLoader</a></li>
                                <li><a href="../classes/ScrollEvent.html">ScrollEvent</a></li>
                                <li><a href="../classes/ScrollView.html">ScrollView</a></li>
                                <li><a href="../classes/Sprite.html">Sprite</a></li>
                                <li><a href="../classes/Stage.html">Stage</a></li>
                                <li><a href="../classes/TextField.html">TextField</a></li>
                                <li><a href="../classes/TouchEvent.html">TouchEvent</a></li>
                                <li><a href="../classes/Tween.html">Tween</a></li>
                                <li><a href="../classes/URLRequest.html">URLRequest</a></li>
                                <li><a href="../classes/Vector.html">Vector</a></li>
                            </ul>
                
                            <ul id="api-modules" class="apis modules">
                                <li><a href="../modules/go2d.html">go2d</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
                    Show:
                    <label for="api-show-inherited">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </div>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
<h1 class="file-heading">File: src\display\TextField.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * 文本显示类，用于文本排列和显示。
 * @author Lanfei
 * @class TextField
 * @extends Sprite
 *
 * @constructor
 * @param {string} [text] 要显示的文本
 */
var TextField = go2d.TextField = Sprite.extend({
	__init: function(text, options) {
		this._super();
		this.on(&#x27;render&#x27;, this._onRender);
		options = options || {};
		var properties = {

			/**
			 * 是否粗体
			 * @property bold
			 * @type Boolean
			 * @default false
			 */
			bold: options.bold || false,

			/**
			 * 是否斜体
			 * @property italic
			 * @type Boolean
			 * @default false
			 */
			italic: options.italic || false,

			/**
			 * 字体大小
			 * @property fontSize
			 * @type number
			 * @default 24
			 */
			fontSize: options.fontSize || 24,

			/**
			 * 字体颜色或样式
			 * @property color
			 * @type string
			 * @default black |Object
			 */
			color: options.color || &#x27;black&#x27;,

			/**
			 * 对齐方式
			 * @property textAlign
			 * @type string
			 * @default left
			 */
			textAlign: options.textAlign || &#x27;left&#x27;,

			/**
			 * 行高，可为百分比
			 * @property lineHeight
			 * @type number
			 * @default 120% |string
			 */
			lineHeight: options.lineHeight || &#x27;120%&#x27;,

			/**
			 * 描边大小
			 * @property strokeSize
			 * @type number
			 * @default 0
			 */
			strokeSize: options.strokeSize || 0,

			/**
			 * 描边颜色或样式
			 * @property strokeColor
			 * @type string
			 * @default null |Object
			 */
			strokeColor: options.strokeColor || null,

			/**
			 * 文本字体
			 * @property fontFamily
			 * @type string
			 * @default Arial
			 */
			fontFamily: options.fontFamily || &#x27;Arial&#x27;,

			/**
			 * 是否允许在单词内部换行
			 * @property breakWord
			 * @type Boolean
			 * @default false
			 */
			breakWord: options.breakWord || false,

			/**
			 * 是否自动调整宽高
			 * @property autoResize
			 * @type Boolean
			 * @default false
			 */
			autoResize: options.autoResize || false,

			/**
			 * 顶部内边距
			 * @property paddingTop
			 * @type number
			 * @default 0
			 */
			paddingTop: options.paddingTop || 0,

			/**
			 * 左部内边距
			 * @property paddingLeft
			 * @type number
			 * @default 0
			 */
			paddingLeft: options.paddingLeft || 0,

			/**
			 * 右部内边距
			 * @property paddingRight
			 * @type number
			 * @default 0
			 */
			paddingRight: options.paddingRight || 0,

			/**
			 * 底部内边距
			 * @property paddingBottom
			 * @type number
			 * @default 0
			 */
			paddingBottom: options.paddingBottom || 0,

			/**
			 * 自动调整宽高时的最大宽度
			 * @property maxWidth
			 * @type number
			 * @default 0xffffff
			 */
			maxWidth: options.maxWidth || 0xffffff,

			/**
			 * 自动调整宽高时的最大高度
			 * @property maxHeight
			 * @type number
			 * @default 0xffffff
			 */
			maxHeight: options.maxHeight || 0xffffff
		};

		forEach(properties, function(value, key) {
			Object.defineProperty(this, key, {
				set: function(value) {
					if (properties[key] !== value) {
						properties[key] = value;
						this._updateContext();
						this.update();
					}
				},
				get: function() {
					return properties[key];
				}
			});
		}, this);

		/**
		 * 文字渲染的宽高
		 * @property textRange
		 * @type number
		 */
		Object.defineProperty(this, &#x27;textRange&#x27;, {
			set: function() {},
			get: function() {
				return this._getTextRange(this._splitLines());
			}
		});

		/**
		 * 文字渲染的宽度
		 * @property textWidth
		 * @type number
		 */
		Object.defineProperty(this, &#x27;textWidth&#x27;, {
			set: function() {},
			get: function() {
				return this.textRange.width;
			}
		});

		/**
		 * 文字渲染的高度
		 * @property textHeight
		 * @type number
		 */
		Object.defineProperty(this, &#x27;textHeight&#x27;, {
			set: function() {},
			get: function() {
				return this.textRange.height;
			}
		});

		/**
		 * 要显示的文字
		 * @property text
		 * @type string
		 */
		Object.defineProperty(this, &#x27;text&#x27;, {
			set: function(value) {
				if (value === undefined || value === null) {
					value = &#x27;&#x27;;
				} else {
					value = &#x27;&#x27; + value;
				}
				if (text !== value) {
					text = value;
					this.update();
				}
			},
			get: function() {
				return text;
			}
		});
		this.text = text;
	},
	_updateContext: function() {
		var ctx = this.context,
			italicStr = this.italic ? &#x27;italic&#x27; : &#x27;normal&#x27;,
			boldStr = this.bold ? &#x27;bold&#x27; : &#x27;normal&#x27;,
			sizeStr = this.fontSize + &#x27;px&#x27;;

		ctx.font = italicStr + &#x27; &#x27; + boldStr + &#x27; &#x27; + sizeStr + &#x27; &#x27; + this.fontFamily;
		ctx.textAlign = this.textAlign;
		ctx.textBaseline = &#x27;top&#x27;;
		ctx.fillStyle = this.color;
		ctx.lineWidth = this.strokeSize;
		ctx.strokeStyle = this.strokeColor;
	},
	_getLineHeight: function() {
		var lineHeight = this.lineHeight;
		if (/%/.test(lineHeight)) {
			return Math.round(parseFloat(lineHeight) * this.fontSize / 100);
		}
		return lineHeight;
	},
	_splitLines: function() {
		var newLines = [],
			ctx = this.context,
			lines = this.text.split(&#x27;\n&#x27;),
			breakWord = this.breakWord,
			width = this.autoResize ? this.maxWidth : this.width;
		width -= this.paddingLeft + this.paddingRight;
		forEach(lines, function(line) {
			if (ctx.measureText(line).width &lt; width) {
				newLines.push(line);
			} else if (breakWord) {
				var i = 0;
				while (line.length &gt; 0) {
					++i;
					if (ctx.measureText(line.substr(0, i + 1)).width &gt; width || i === line.length) {
						newLines.push(line.substr(0, i));
						line = line.substr(i);
						i = 0;
					}
				}
			} else {
				var word, bound,
					words = [],
					newLine = &#x27;&#x27;,
					splits = line.split(/\b/);
				while (splits.length) {
					word = splits.shift();
					if (/\w+/i.test(word)) {
						words.push(word);
					} else {
						words = words.concat(word.split(&#x27;&#x27;));
					}
				}
				while (words.length) {
					word = words[0];
					if (ctx.measureText(newLine + word).width &gt; width &amp;&amp; newLine) {
						newLines.push(newLine);
						newLine = &#x27;&#x27;;
					} else {
						newLine += words.shift();
					}
				}
				if (newLine) {
					newLines.push(newLine);
				}
			}
		}, this);
		return newLines;
	},
	_onRender: function() {
		var lines = this._splitLines();
		this._updateContext();
		if (this.autoResize) {
			var range = this._getTextRange(lines);
			this.width = Math.min(range.width, this.maxWidth) + this.paddingLeft + this.paddingRight;
			this.height = Math.min(range.height, this.maxHeight) + this.paddingTop + this.paddingBottom;
			this._updateContext();
		}
		this._drawLines(lines);
	},
	_getTextRange: function(lines) {
		var width = 0,
			height = 0,
			ctx = this.context,
			lineHeight = this._getLineHeight();
		forEach(lines, function(line) {
			width = Math.max(width, ctx.measureText(line).width);
			height += lineHeight;
		});
		return {
			width: width,
			height: height
		};
	},
	_drawLines: function(lines) {
		var x = 0,
			y = 0,
			paddingLeft = this.paddingLeft,
			paddingTop = this.paddingTop,
			lineHeight = this._getLineHeight();
		if (this.textAlign === &#x27;center&#x27;) {
			x = paddingLeft + this.width / 2;
		} else if (this.textAlign === &#x27;right&#x27;) {
			x = paddingLeft + this.width;
		} else {
			x = paddingLeft;
		}
		forEach(lines, function(line, i) {
			y = paddingTop + i * lineHeight;
			this._drawText(line, x, y);
		}, this);
	},
	_drawText: function(text, x, y) {
		var ctx = this.context;
		ctx.save();
		if (this.color) {
			ctx.fillText(text, x, y);
		}
		if (this.strokeSize &amp;&amp; this.strokeColor) {
			ctx.strokeText(text, x, y);
		}
		ctx.restore();
	},
	/**
	 * 设置要显示的文字
	 * @function setText
	 * @return {this}
	 */
	setText: function(text) {
		this.text = text;
		return this;
	}
});
    </pre>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
